<template>
	<el-dialog :before-close="handleClose" :title="title" :visible="value" :width="width" append-to-body custom-class="modal-dialog">
		<slot />
		<span v-if="showButton" slot="footer">
			<slot name="footer">
				<div class="modal-footer">
					<el-button
						v-if="showOkButton"
						:class="['modal-footer-btn', !showCloseButton && '!mr-0']"
						:loading="loading"
						:style="okButtonStyle"
						class="modal-footer-btn"
						type="primary"
						@click="handleSubmit"
						>{{ okButtonText }}</el-button
					>
					<el-button v-if="showCloseButton" :style="closeButtonStyle" class="modal-footer-btn !mr-0" @click="handleSubmitClose">{{ closeButtonText }}</el-button>
				</div>
			</slot>
		</span>
	</el-dialog>
</template>

<script>
export default {
	props: {
		//v-model
		value: {
			type: Boolean,
			default: false,
		},
		//标题
		title: {
			type: String,
			default: '',
		},
		//宽度
		width: {
			type: String,
			default: '500px',
		},
		//保存按钮文字
		okButtonText: {
			type: String,
			default: '保存',
		},
		//保存宽度
		onButtonWidth: {
			type: String,
			default: 'auto',
		},
		//取消宽度
		closeButtonWidth: {
			type: String,
			default: 'auto',
		},
		//取消按钮文字
		closeButtonText: {
			type: String,
			default: '取消',
		},
		//是否显示按钮
		showButton: {
			type: Boolean,
			default: true,
		},
		//是否显示确定按钮
		showOkButton: {
			type: Boolean,
			default: true,
		},
		//是否显示取消按钮
		showCloseButton: {
			type: Boolean,
			default: true,
		},
		//取消事件
		showCloseEvent: {
			type: Boolean,
			default: true,
		},
		//按钮loading
		loading: {
			type: Boolean,
			default: false,
		},
		height: {
			type: String,
			default: '60px',
		},
	},
	computed: {
		okButtonStyle() {
			if (!this.onButtonWidth || this.onButtonWidth === 'auto')
				return {
					height: this.height + ' !important',
				};
			return {
				width: this.onButtonWidth,
				flex: '0 0 ' + this.onButtonWidth,
				height: this.height,
			};
		},
		closeButtonStyle() {
			if (!this.closeButtonWidth || this.closeButtonWidth === 'auto')
				return {
					height: this.height + ' !important',
				};
			return {
				width: this.closeButtonWidth,
				flex: '0 0 ' + this.closeButtonWidth,
				height: this.height,
			};
		},
	},
	methods: {
		handleSubmit() {
			this.$emit('update:loading', true);
			this.$emit('formSubmit');
		},
		handleSubmitClose() {
			this.$emit('formClose');
		},
		handleClose() {
			if (this.showCloseEvent) {
				this.$emit('input', false);
			}
			this.$emit('close');
		},
	},
};
</script>

<style lang="scss" scoped></style>
